<template>
  <div class="xd-LearningHome-PersonalCenter">
    <el-tabs v-model="activeName">
      <el-tab-pane label="统计中心" name="first">
        <!-- 我的学习 -->
        <div class="card">
          <div class="card-title">
            <span class="title-value">我的学习</span>
            <span class="title-desc">
              共
              <span class="desc-value">{{curriculumMap.studyNum || 0}}</span>次
            </span>
          </div>
          <div class="card-content">
            <div class="content-header">
              <div class="header-result">
                <div class="media-card">
                  <img class="media-image" :src="icons.joined" alt />
                  <div class="media-body">
                    <span class="media-text">{{curriculumMap.studyUnfinishNum || 0}}次</span>
                    <span class="media-title">正在学习课程</span>
                  </div>
                </div>
                <div class="media-card">
                  <img class="media-image" :src="icons.finished" alt />
                  <div class="media-body">
                    <span class="media-text">{{curriculumMap.studyFinishNum || 0}}次</span>
                    <span class="media-title">已经学习课程</span>
                  </div>
                </div>
              </div>
              <div class="header-search">
                <el-input
                  class="search-cell"
                  v-model="currentCurriculumTitle"
                  placeholder="课程名称"
                  clearable
                  style="width:300px;"
                ></el-input>
                <el-select
                  class="search-cell"
                  v-model="currentCurriculumStatus"
                  placeholder="课程状态"
                  clearable
                >
                  <el-option
                    v-for="item in curriculumStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-date-picker
                  class="search-cell"
                  v-model="curriculumDateRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
                <el-button class="search" @click="fetchCurriculum">搜索</el-button>
              </div>
            </div>
            <div class="content-body">
              <el-table :data="curriculumList" style="width: 100%" stripe border>
                <el-table-column prop="curriculumTitle" label="课程名称" align="center"></el-table-column>
                <el-table-column prop="create_time" label="课程发布时间" align="center"></el-table-column>
                <el-table-column prop="statusText" label="课程学习状态" align="center"></el-table-column>
                <el-table-column prop="first_time" label="学习开始时间" align="center"></el-table-column>
                <el-table-column prop="last_time" label="完成学习时间" align="center"></el-table-column>
                <el-table-column prop="user_points" label="获取学分" align="center"></el-table-column>
              </el-table>
            </div>
            <div class="content-footer">
              <el-pagination
                @size-change="curriculumSizeChange"
                @current-change="curriculumPageChange"
                :current-page="curriculumForm.page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="curriculumForm.size"
                :layout="PAGE_LAYOUT"
                :total="curriculumForm.total"
              ></el-pagination>
            </div>
          </div>
        </div>

        <!-- 我的考试 -->
        <div class="card">
          <div class="card-title">
            <span class="title-value">我的考试</span>
            <span class="title-desc">
              共
              <span class="desc-value">{{examMap.examNum || 0}}</span>次
            </span>
          </div>
          <div class="card-content">
            <div class="content-header">
              <div class="header-result">
                <div class="media-card">
                  <img class="media-image" :src="icons.pass" alt />
                  <div class="media-body">
                    <span class="media-text">{{examMap.passNum || 0}}份</span>
                    <span class="media-title">及格试卷</span>
                  </div>
                </div>
                <div class="media-card">
                  <img class="media-image" :src="icons.joined" alt />
                  <div class="media-body">
                    <span class="media-text">{{examMap.examNum || 0}}次</span>
                    <span class="media-title">参加考试次数</span>
                  </div>
                </div>
                <div class="media-card">
                  <img class="media-image" :src="icons.finished" alt />
                  <div class="media-body">
                    <span class="media-text">{{examMap.finishNum || 0}}次</span>
                    <span class="media-title">已经完成考试</span>
                  </div>
                </div>
                <div class="media-card">
                  <img class="media-image" :src="icons.unfinished" alt />
                  <div class="media-body">
                    <span class="media-text">{{examMap.unfinishNum || 0}}次</span>
                    <span class="media-title">未完成考试</span>
                  </div>
                </div>
              </div>
              <div class="header-search">
                <el-input
                  class="search-cell"
                  v-model="currentExamTitle"
                  placeholder="考试名称"
                  clearable
                  style="width:300px;"
                ></el-input>
                <el-select
                  class="search-cell"
                  v-model="currentExamStatus"
                  placeholder="考试状态"
                  clearable
                >
                  <el-option
                    v-for="item in examStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-date-picker
                  class="search-cell"
                  v-model="examDateRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
                <el-button class="search" @click="fetchExamination">搜索</el-button>
              </div>
            </div>
            <div class="content-body">
              <el-table :data="examList" style="width: 100%" stripe border>
                <el-table-column prop="examTitle" label="考试名称" align="left" header-align="center"></el-table-column>
                <el-table-column prop="examCreateTime" label="考试发布时间" align="center" width="200"></el-table-column>
                <el-table-column prop="userStartTime" label="参加考试时间" align="center" width="200"></el-table-column>
                <el-table-column prop="statusText" label="考试状态" align="center" width="100"></el-table-column>
                <el-table-column prop="userScore" label="考试成绩" align="center" width="100"></el-table-column>
                <el-table-column prop="userPoints" label="获取学分" align="center" width="100"></el-table-column>
              </el-table>
            </div>
            <div class="content-footer">
              <el-pagination
                @size-change="examSizeChange"
                @current-change="examPageChange"
                :current-page="examForm.page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="examForm.size"
                :layout="PAGE_LAYOUT"
                :total="examForm.total"
              ></el-pagination>
            </div>
          </div>
        </div>

        <!-- 我的学分 -->
        <div class="card">
          <div class="card-title">
            <span class="title-value">我的学分</span>
            <!-- <span class="title-desc">共<span class="desc-value">32</span>次</span> -->
          </div>
          <div class="card-content">
            <div class="content-header">
              <div class="header-result">
                <div class="media-card">
                  <img class="media-image" :src="icons.pass" alt />
                  <div class="media-body">
                    <span class="media-text">{{pointMap.points || 0}}</span>
                    <span class="media-title">年度学分</span>
                  </div>
                </div>
                <div class="media-card">
                  <img class="media-image" :src="icons.joined" alt />
                  <div class="media-body">
                    <span class="media-text">{{pointMap.schoolRank || 0}}</span>
                    <span class="media-title">全校排名</span>
                  </div>
                </div>
                <div class="media-card">
                  <img class="media-image" :src="icons.finished" alt />
                  <div class="media-body">
                    <span class="media-text">{{pointMap.deptRank || 0}}</span>
                    <span class="media-title">单位排名</span>
                  </div>
                </div><div class="media-card">
                  <img class="media-image" :src="icons.finished" alt />
                  <div class="media-body">
                    <span class="media-text">{{pointMap.deptRank || 0}}</span>
                    <span class="media-title">每周排名</span>
                  </div>
                </div><div class="media-card">
                  <img class="media-image" :src="icons.finished" alt />
                  <div class="media-body">
                    <span class="media-text">{{pointMap.deptRank || 0}}</span>
                    <span class="media-title">每月排名</span>
                  </div>
                </div>
              </div>
              <div class="header-search">
                <el-select
                  class="search-cell"
                  v-model="currentPointType"
                  placeholder="获取积分途径"
                  clearable
                >
                  <el-option
                    v-for="item in pointTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-date-picker
                  class="search-cell"
                  v-model="pointDateRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="dateChange"
                ></el-date-picker>
                <el-button class="search" @click="fetchPoint">搜索</el-button>
              </div>
            </div>
            <div class="content-body">
              <el-table :data="pointList" style="width: 100%" stripe border>
                <el-table-column prop="create_time" label="积分获取日期" align="center"></el-table-column>
                <el-table-column prop="dict_label" label="积分获取途径" align="center"></el-table-column>
                <el-table-column prop="points" label="获取学分" align="center"></el-table-column>
              </el-table>
            </div>
            <div class="content-footer">
              <el-pagination
                @size-change="pointSizeChange"
                @current-change="pointPageChange"
                :current-page="pointForm.page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pointForm.size"
                :layout="PAGE_LAYOUT"
                :total="pointForm.total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的待办" name="second" v-if="1==2">
        <div class="content-body">
          <el-table
            :data="todoList"
            style="width: 100%;cursor: pointer;"
            stripe
            border
            @row-click="goTodo"
          >
            <el-table-column prop="title" label="事项名称" align="center"></el-table-column>
            <el-table-column prop="type" label="事项类型" align="center"></el-table-column>
            <el-table-column prop="time" label="创建时间" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="content-footer">
          <el-pagination
            @size-change="todoSizeChange"
            @current-change="todoPageChange"
            :current-page="todoForm.page"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="todoForm.size"
            :layout="PAGE_LAYOUT"
            :total="todoForm.total"
          ></el-pagination>
        </div>
        <!-- <div class="funs">
          <el-card shadow="hover" class="first">
            <div style="display:flex;">
              <div style="flex:1">
                <div
                  v-for="(item, index) in todoList"
                  :key="'todo' + index"
                  class="funs-list link-cell"
                >
                  <p :class="['rank'+(index+1),'rank']">{{index+1}}</p>
                  <p class="title">{{item.title}}</p>
                  <p
                    class="text_color_429688"
                    style="margin-left:30px;margin-right:30px;"
                  >{{item.type}}</p>
                  <p class="text_color_666666">{{spliceDateString(item.time)}}</p>
                </div>
              </div>
            </div>
          </el-card>
        </div>-->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
const examStatusOptions = [{
  label: '未完成',
  value: 0
}, {
  label: '已完成',
  value: 1
}]

const curriculumStatusOptions = [{
  label: '未完成',
  value: 0
}, {
  label: '已完成',
  value: 1
}]

const pointTypeOptions = [{
  label: '课程学习',
  value: 1
}, {
  label: '课后练习',
  value: 2
}, {
  label: '统一考试',
  value: 3
}, {
  label: '闯关',
  value: 4
}, {
  label: '登录',
  value: 5
}, {
  label: '课程评论',
  value: 6
}, {
  label: '学习心得',
  value: 7
}, {
  label: '查看通知公告',
  value: 8
}, {
  label: '查看政工要闻',
  value: 9
}]

// function sliceList(list) {
//   let result = [];
//   if (list.length > 5) {
//     result = list.slice(0, 5)
//   } else {
//     result = list
//   }
//   return result
// }

export default {
  name: 'PersonalCenter',
  data() {
    return {
      icons: {
        pass: require('@/assets/imgs/green_icon_pass.png'),
        finished: require('@/assets/imgs/green_icon_finished.png'),
        joined: require('@/assets/imgs/green_icon_joined.png'),
        unfinished: require('@/assets/imgs/green_icon_unfinished.png')
      },
      examForm: {
        page: 1,
        size: 10,
        total: 1
      },
      curriculumForm: {
        page: 1,
        size: 10,
        total: 1
      },
      pointForm: {
        page: 1,
        size: 10,
        total: 1
      },
      currentExamTitle: '',
      currentExamStatus: '',
      examMap: {},
      examList: [],
      examStatusOptions: examStatusOptions,
      examDateRange: null,
      currentCurriculumTitle: '',
      currentCurriculumStatus: '',
      curriculumMap: {},
      curriculumList: [],
      curriculumStatusOptions: curriculumStatusOptions,
      curriculumDateRange: null,
      currentPointType: '',
      pointMap: {},
      pointList: [],
      pointTypeOptions: pointTypeOptions,
      pointDateRange: null,
      activeName: 'first',
      todoList: [],
      todoForm: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.$store.commit('updateActiveMenu', '/LearningHome/PersonalCenter')
    if (this.$route.query.tabName) {
      this.activeName = this.$route.query.tabName
    }
    this.fetchExamination()
    this.fetchCurriculum()
    this.fetchPoint()
    this.fetchTodo()
  },
  methods: {
    dateChange(res) {

    },
    curriculumSizeChange(val) {
      this.curriculumForm.size = val
      this.fetchCurriculum()
    },
    curriculumPageChange(val) {
      this.curriculumForm.page = val
      this.fetchCurriculum()
    },
    examSizeChange(val) {
      this.examForm.size = val
      this.fetchExamination()
    },
    examPageChange(val) {
      this.examForm.page = val
      this.fetchExamination()
    },
    pointSizeChange(val) {
      this.pointForm.size = val
      this.fetchPoint()
    },
    pointPageChange(val) {
      this.pointForm.page = val
      this.fetchPoint()
    },
    splitDate(value) {
      return ~value.indexOf(' ') ? value.split(' ')[0] : values
    },
    fetchExamination() {
      utils.post('/personalCenter/PersonalCenterExamination', {
        examTitle: this.currentExamTitle,
        examStatus: this.currentExamStatus,
        startTime: this.examDateRange ? this.examDateRange[0] : '',
        endTime: this.examDateRange ? this.examDateRange[1] : '',
        pageNumber: this.examForm.page,
        pageSize: this.examForm.size
      }, res => {
        if (res.success) {
          this.examMap = res.data.examMap
          this.examList = res.data.examList.rows.map(item => {
            const value = examStatusOptions.find(element => {
              return element.value === item.examStatus;
            })
            item.statusText = value ? value.label : ''
            return item;
          })
          this.examForm.total = res.data.examList.total
        }
      })
    },
    fetchCurriculum() {
      utils.post('/personalCenter/PersonalCenterCurriculum', {
        curriculumTitle: this.currentCurriculumTitle,
        curriculumStatus: this.currentCurriculumStatus,
        startTime: this.curriculumDateRange ? this.curriculumDateRange[0] : '',
        endTime: this.curriculumDateRange ? this.curriculumDateRange[1] : '',
        pageNumber: this.curriculumForm.page,
        pageSize: this.curriculumForm.size
      }, res => {
        if (res.success) {
          this.curriculumMap = res.data.curriculumMap
          this.curriculumList = res.data.curriculumList.rows.map(item => {
            item.statusText = curriculumStatusOptions.find(element => {
              return element.value === item.is_completed
            }).label
            return item;
          })
          this.curriculumForm.total = res.data.curriculumList.total
        }
      })
    },
    fetchPoint() {
      utils.post('/personalCenter/PersonalCenterPoint', {
        type: this.currentPointType,
        startTime: this.pointDateRange ? this.pointDateRange[0] : '',
        endTime: this.pointDateRange ? this.pointDateRange[1] : '',
        pageNumber: this.pointForm.page,
        pageSize: this.pointForm.size
      }, res => {
        if (res.success) {
          this.pointMap = res.data.pointMap
          this.pointList = res.data.pointList.rows
          this.pointForm.total = res.data.pointList.total
        }
      })
    },
    fetchTodo() {
      utils.post('/homePage/TodoMatters', {
        pageNumber: this.todoForm.page,
        pageSize: this.todoForm.pageSize
      }, res => {
        if (res.success) {
          this.todoList = res.data.rows
          this.todoForm.total = res.data.total
        }
      })
    },
    todoSizeChange(val) {
      this.todoForm.pageSize = val
      this.fetchTodo()
    },
    todoPageChange(val) {
      this.todoForm.page = val
      this.fetchTodo()
    },
    goTodo(row) {
      switch (row.type) {
        case '学习':
          this.$router.push({
            path: '/LearningHome/Learning/CourseIntroduction',
            query: {
              tid: row.id
            }
          })
          break;
        case '考试':
          this.$router.push({
            path: '/LearningHome/OnlineExams/ExamInstructions',
            query: {
              tid: row.id
            }
          })
          break;
        case '政工计划':
          this.$router.push({
            path: '/LearningHome/PoliticalWorkPlan',
            query: {
              tab: 1
            }
          })
          break;
        case '公告':
          this.$router.push({ path: '/LearningHome/NoticeCenter/Detail', query: { id: row.id, activeMenu: '/LearningHome/NoticeCenter' } })
          break;
      }
    }
  }
}
</script>
<style lang="less">
@primary-color: #cb2c21;
@border-color: #cacaca;
@white-color: #ffffff;
@grey-color: #666666;

.xd-LearningHome-PersonalCenter {
  .text-primary {
    color: #cb2c21;
  }
  .card {
    border: 1px solid @border-color;
    margin-bottom: 20px;
    background-color: @white-color;
    &:first-child {
      margin-top: 10px;
    }
    .card-title {
      padding: 14px 32px 0 32px;
      border-bottom: 1px solid @border-color;
      .title-value {
        display: inline-block;
        font-size: 18px;
        color: @primary-color;
        border-bottom: 3px solid @primary-color;
        padding-bottom: 15px;
        margin-right: 32px;
      }
      .title-desc {
        color: @grey-color;
        .desc-value {
          color: @primary-color;
        }
      }
    }
    .card-content {
      .content-header {
        border-bottom: 1px solid @border-color;
        padding: 30px 64px;
        .header-result {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 33px;
          .media-card {
            display: flex;
            flex: 1;
            flex-direction: row;
            .media-image {
              width: 50px;
              height: 50px;
              margin-right: 22px;
            }
            .media-body {
              display: flex;
              flex-direction: column;
              color: @primary-color;
              .media-text {
                font-size: 18px;
              }
              .media-title {
                color: @grey-color;
                margin-top: 8px;
              }
            }
          }
        }
        .header-search {
          display: flex;
          flex-direction: row;
          .search-cell {
            margin-right: 32px;
            *::-webkit-input-placeholder {
              color: @primary-color;
            }
            .el-input__inner {
              color: @primary-color;
            }
            .el-range-input {
              color: @primary-color;
            }
          }
          .search {
            background-color: @primary-color;
            color: @white-color;
            border: none;
          }
        }
      }
      .content-body {
        padding: 30px 64px;
      }
      .content-footer {
        padding: 30px 64px;
      }
    }
  }

  .funs {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 24px;

    .first {
      grid-column-end: 3 span;
    }

    .el-card__header {
      padding-left: 0px;
    }

    .clearfix {
      .title {
        border-left: solid 2px #cb2c21;
        padding-left: 12px;
      }
      .el-button--text {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 22.5px;
        letter-spacing: 0px;
        color: #666666;
      }
    }
    .funs-list {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
      overflow: hidden;

      p {
        height: 30px;
        line-height: 30px;
      }

      .title {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333333;
      }

      .rank {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 25px;
      }

      .rank1 {
        background-color: #df1632;
      }

      .rank2 {
        background-color: #f46a2d;
      }

      .rank3 {
        background-color: #f2ac17;
      }

      .rank4,
      .rank5 {
        background-color: #999999;
      }
    }
  }

  .el-table th > .cell {
    color: @primary-color;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #fbf2f1;
  }

}
</style>
